import * as React from "react";
import { observer } from "mobx-react";
import { Row, Col, Menu } from "antd";
import { WeaInputNumber, WeaCheckbox, WeaLocaleProvider } from "ecCom";
import ValueFormatterStore from "../FormatterSettingDialog";
const getLabel = WeaLocaleProvider.getLabel;
export interface IValueFormatter {
    store: ValueFormatterStore;
}
@observer
export default class ValueFormatter extends React.Component<IValueFormatter,{}> {
    render() {
        const { store} = this.props;
        const { xiaoshuvalue = 0, onChangeXiaoshuwei, qfwCheck, changeQfwCheck,valueType,onClickValueType,selectValueType = '1' } = store;
        let qfw = qfwCheck == true ? "," : "";
        let xs = "";
        for (let i = 0 ; i < xiaoshuvalue ; i++) {
            let num = i==0 ? ".1" :"0";
            xs += num;
        }
        return (
            <div>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@we1m6m`} className="edcreport-formatter-common">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1tlg0o`} span={4} style={{ verticalAlign: 'top', display: 'inline-block', lineHeight: '33px' }}>
                        <label>{getLabel('526948','小数位数：')}</label>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g0ae4e`} span={8}>
                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@mc06w0`} value={xiaoshuvalue} onChange={onChangeXiaoshuwei} min={0} max ={30} style={{ width: 60, marginRight: 10 }}></WeaInputNumber>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zlst2w`} className="edcreport-formatter-common"><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@fl4nsw`}
                    value={qfwCheck}
                    content={<span>{ getLabel('526951','使用千分位分隔符(,)') }</span>}
                    onChange={changeQfwCheck}
                /></Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z3z0wh`} className="edcreport-formatter-common">
                    <label>{getLabel('526950','负数:') }:</label>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ec7bld`} className="edcreport-formatter-common">
                    <div className="edcreport-valuetype-list-wrapper">
                        <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@d1fe4x`}
                            onClick={onClickValueType}
                            selectedKeys={[selectValueType]}
                        >
                            {valueType.map(menu => (
                                <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@imbmhc@${menu.key}`} key={menu.key} className="edc-report-valuetypeitem">
                                    <span className={menu.color =='red' ? "edc-report-redFont": ""}>{menu.showname1 + menu.showname2+ qfw +menu.showname + xs + menu.showname3}</span>
                            </Menu.Item>
                        ))}
                        </Menu>
                    </div>
                </Row>

            </div>
        );
    }
}